<template>
  <div class="hello">
    数据库名字:<input type="text" v-model="database"><br>
    操作:<input type="text" v-model="option"><br>
    方法:
    <select v-model="method">
      <option value="1">get</option>
      <option value="2">post</option>
    </select><br>
    id: <input type="number" v-model="id"><br>
    data: <textarea name="" id="" cols="30" rows="10" v-model="data"></textarea><br>
    <button @click="submitData">提交</button>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        database: '',
        option: '',
        method: 1,
        id: '',
        data: '',
      }
    },
    methods: {
      submitData: function (event) {
        let serverUrl = 'localhost:3000/database';
        if (this.method == 1) {
          axios.get(serverUrl, {
            params: {
              id: this.id,
              database: this.database,
              option: this.option,
              data: this.data
            }
          }).then(function (response) {
            console.log(response);
          }).catch(function (error) {
            console.log(error);
          });
        }
        if (this.method == 2) {
          axios.post('/user', {
            id: this.id,
            database: this.database,
            option: this.option,
            data: this.data
          })
            .then(function (response) {
              console.log(response);
            })
            .catch(function (error) {
              console.log(error);
            });
        }

      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }

  input {
    height: 30px;
    margin-bottom: 20px;
  }

  select {
    height: 30px;
    margin-bottom: 20px;
  }
</style>
